<template>
  <h1>一个人的信息</h1>
  <!-- 模板中解析，不需要.value -->
  <h2>姓：<input v-model="person.firstName" /></h2>
  <h2>名：<input v-model="person.lastName" /></h2>
  <div>全名：{{person.fullName}}</div>
  <div>全名：<input v-model="person.fullName" /></div>
</template>

<script>
// import Vue from 'vue'
import { ref, reactive, computed } from 'vue'

export default {
  name: 'Demo',
  /* computed: {
    fullName() {
      return this.person.firstName + this.person.lastName
    }
  }, */
  setup(props, context) {
    let person = reactive({
      firstName: "张",
      lastName: "三",
    })

    // 计算属性
    /* const fullName = computed(() => {
      return person.firstName + '-' + person.lastName
    }) */

    // 简写写法，只读形式，没有考虑修改情况
    /* person.fullName = computed(() => {
      return person.firstName + '-' + person.lastName
    }) */

    // 完整写法，考虑读和写
    person.fullName = computed({
      get() {
        return person.firstName + '-' + person.lastName
      },
      set(val) {
        const nameArr = val.split("-")
        person.firstName = nameArr[0]
        person.lastName = nameArr[1]
      }
    })

    // 返回一个对象，暴露给模板使用（常用）
    return {
      person
    }
  }
}
</script>

<style>

</style>
